<template>
	<view>
		<!-- 登录 -->
		<view class="container">
			<view class="cover slide-top1" :style="'animation-play-state:paused'">
				<view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]" ref="fixedView"
					:style="'animation-play-state:paused'">
					<uni-row>
						<text class="text-forth" v-if="info.cashierSwitch==1">点击关闭抢单</text>
						<text class="text-forth" v-if="info.cashierSwitch==0">点击开启抢单</text>
						<view :class="{ active: isActive === true, button: isActive !== true }" @click="playGrab"
							:style="'animation-play-state:paused'">
							<uni-row>
								<text class="text-fifth" v-if="info.cashierSwitch==1">正在抢单</text>
								<text class="text-fifth" v-if="info.cashierSwitch==0">尚未开启</text>
							</uni-row>
						</view>
						<text class="text-third">商城代购</text>
					</uni-row>
				</view>
			</view>
		</view>
	</view>
	<view class="meituan" v-if="accList.length==0">
		<view class="content" style="justify-content: center;">
			<icon type="warn" size="20"/>&nbsp;
			<span>请先配置收银账号</span>
		</view>
	</view>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<view class="meituan" v-for="(res, index) in accList" :key="res.id">
					<view class="content">
						<view class="left">
							<view class="sum">
								<text class="num">{{res.profitRatio}}%</text>
							</view>
							<view class="type">收益率</view>
						</view>
						<view class="centre">
							<view class="title">
								{{res.accountKey}}
							</view>
							
							<view class="valid-date">
								账号名：{{res.accountName}}
							</view>
						</view>
						<view class="right">
							<view class="immediate-use">
								<view v-if="res.accountType==='alipay'">支付宝</view>
								<view v-if="res.accountType==='bank'">银行卡</view>
								<view v-if="res.accountType==='wechat'">微信</view>
								<view v-if="res.paymentWay==='trans'">转账</view>
								<view v-if="res.paymentWay==='qr'">扫码</view>
							</view>
						</view>
					</view>
					<!-- <view class="tips">
						<view class="circle-left"></view>
						<view class="circle-right"></view>
						<view class="explain u-line-1">&lt;当前收款号&gt;</view>
						<view class="rule">
							<text>切换其他账号</text>
							<u-icon name="arrow-down" color="" :size="20"></u-icon>
						</view>
					</view> -->
				</view>
			</swiper-item>	
		</swiper>
	</view>	
</template>
  
<script>
import { reactive } from 'vue';  
import { index,cashierSwitch } from "@/api/seller/info"
export default {
	data() {
		return {
			autoplay: true,
			indicatorDots: true,
			interval: 3000,
			duration: 500,
			src: "staticimagessoutheast.jpg",
			isActive: false,
			isFixedViewVisible: true,
			animationType: "up", // 可选值：right 或 up
			isAnimating: false, // 控制动画执行状态
			page: "index",
			accList: [],
			info: {cashierSwitch: 0}
		}
	},
	computed: {
		collapsedClass() {
			return this.isFixedViewVisible ? "" : `collapsed-${this.animationType}`;
		},
	},
	onShow() {
		this.getData();
	},
	methods: {
		getData() {
			index().then(response => {
				this.info = response.data.seller;
				this.accList = response.data.cashierList;
				this.isActive = (this.info.cashierSwitch==1);
			});
		},
		playGrab() {
			uni.showLoading({
				title: (this.isActive?'关闭中':'开启中')
			})
			// 更新销售员
			let switchValue = this.isActive?0:1;
			cashierSwitch(switchValue).then(response=>{
				uni.hideLoading();
				if(this.isActive) {
					this.isActive = false;
					this.info.cashierSwitch = 0;
				}else {
					this.isActive = true;
					this.info.cashierSwitch = 1;
				}
			});
			
		},

		// 登录方法
		async handleLogin() {

		},
	}
}
</script>
  
<style lang="scss">
page {
	background-color: #ffffff;
}
.meituan {
	margin: 30rpx auto;
	background-color: #ffffff;
	width: 95%;
	// border: 10rpx;
	color: $u-warning;
	font-size: 28rpx;
	.content {
		display: flex;
		align-items: center;
		padding: 80rpx 20rpx;
		border: 10rpx;
		background-color: #fff5f4;
		.left {
			.sum {
				font-size: 32rpx;
				.num {
					font-size: 60rpx;
					font-weight: bold;
				}
			}
		}
		.centre {
			margin-left: 30rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: $u-main-color;
				margin-bottom: 20rpx;
			}
		}
		.right {
			margin-left: auto;
			.immediate-use {
				padding: 0 20rpx;
				//height: 50rpx;
				border-radius: 5rpx;
				line-height: 50rpx;
				// background-color: #ffaa7f;
				color: #aa0000!important;
				font-size: 30rpx;
				border: none;
				word-break: keep-all;
			}
		}
	}
	.tips {
		padding: 0 20rpx;
		border: 10rpx;
		background-color: $u-info-light;
		position: relative;
		color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
		font-size: 24rpx;
		.circle-left,
		.circle-right {
			position: absolute;
			height: 36rpx;
			width: 18rpx;
			background-color: #f2f2f2;
		}

		.circle-right {
			border-radius: 40rpx 0 0 40rpx;
			right: 0;
			top: -18rpx;
		}

		.circle-left {
			border-radius: 0 40rpx 40rpx 0;
			left: 0;
			top: -18rpx;
		}
		.rule {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			text {
				margin-right: 10rpx;
				flex: 1;
			}
		}
	}
}


.cover {
	width: 100%;
	height: 650rpx;
	z-index: 9997;
}

.container {
	position: relative;
}

.active {
	position: absolute;
	width: 280rpx;
	height: 280rpx;
	left: 50%;
	margin-left: -140rpx;
	top: 60rpx;
	bottom: 333rpx;
	border-radius: 50%;
	z-index: 9999;
	background: linear-gradient(180deg,
			rgba(110, 109, 122, 0.595),
			rgba(46, 87, 190, 0.714) 70.792%,
			rgb(255, 85, 0) 100%);
	box-shadow: inset 0 0 10px 5px rgba(170, 0, 0, 0.5);
}

.masking {
	position: absolute;
	top: 0rpx;
	width: 100%;
	height: 680rpx;
	background-color: #9acafc;
	border-radius: 0 0 400rpx 400rpx;
	box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
	transition: transform 0.3s ease-out;
	z-index: 9998;
	padding: 100rpx 0 0 0;
}

.collapsed-up {
	transform: translateY(-100%);
}

.button {
	position: absolute;
	width: 280rpx;
	height: 280rpx;
	left: 50%;
	margin-left: -140rpx;
	top: 60rpx;
	bottom: 533rpx;
	border-radius: 50%;
	transition: background-color 0.3s;
	z-index: 9999;

	background: linear-gradient(180deg,
			rgba(60, 53, 239, 0.595),
			rgba(63, 117, 255, 0.714) 70.792%,
			rgb(70, 161, 253) 100%);
	// box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

	box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;

}

.shadow1 {
	position: absolute;
	width: 280rpx;
	height: 280rpx;
	left: 50%;
	margin-left: -140rpx;
	top: 533rpx;
	bottom: 533rpx;
	border-radius: 50%;
	border-width: 4rpx;
	border-color: rgb(70, 161, 253);
	transition: background-color 0.3s;
	z-index: 9998;
	background-color: rgba(70, 161, 253, 0);

	// box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

	box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
	-webkit-animation-name: 'ripple1';
	/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 0.3s;
	/*动画持续时间*/
	-webkit-animation-timing-function: ease;
	/*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0s;
	/*动画延迟时间*/
	-webkit-animation-direction: normal;
	/*定义动画方式*/
}

.shadow2 {
	position: absolute;
	width: 280rpx;
	height: 280rpx;
	left: 50%;
	margin-left: -140rpx;
	top: 533rpx;
	bottom: 533rpx;
	border-radius: 50%;
	border-width: 4rpx;
	border-color: rgb(70, 161, 253);
	transition: background-color 0.3s;
	z-index: 9998;
	background-color: rgba(70, 161, 253, 0);

	// box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

	box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
	-webkit-animation-name: 'ripple2';
	/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 0.4s;
	/*动画持续时间*/
	-webkit-animation-timing-function: ease;
	/*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0.1s;
	/*动画延迟时间*/
	-webkit-animation-direction: normal;
	/*定义动画方式*/
}

.shadow3 {
	position: absolute;
	width: 280rpx;
	height: 280rpx;
	left: 50%;
	margin-left: -140rpx;
	top: 533rpx;
	bottom: 533rpx;
	border-radius: 50%;
	border-width: 4rpx;
	border-color: rgb(70, 161, 253);
	transition: background-color 0.3s;
	z-index: 9998;
	background-color: rgba(70, 161, 253, 0);

	// box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

	box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
	-webkit-animation-name: 'ripple3';
	/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 0.5s;
	/*动画持续时间*/
	-webkit-animation-timing-function: ease;
	/*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0.2s;
	/*动画延迟时间*/
	-webkit-animation-direction: normal;
	/*定义动画方式*/
}

.button.disabled {
	pointer-events: none;
	/* 禁用按钮的点击事件 */
	opacity: 0.5;
	/* 半透明效果 */
}

.text-third {
	position: absolute;
	width: 200rpx;
	height: 60rpx;
	left: 50%;
	transform: translateX(-50%);
	top: 395rpx;
	bottom: 615rpx;
	margin: 0 auto;
	color: rgb(255, 255, 255);
	font-family: "Microsoft YaHei";
	font-size: 50rpx;
	font-weight: 400;
	line-height: 60rpx;
	letter-spacing: 0rpx;
	text-align: center;
}

.text-forth {
	position: absolute;
	width: 180rpx;
	height: 36rpx;
	left: 0;
	right: 0;
	top: 8rpx;
	bottom: 330rpx;
	margin: 0 auto;

	color: rgb(255, 255, 255);
	font-family: "Microsoft YaHei";
	font-size: 27rpx;
	font-weight: 400;
	line-height: 36rpx;
	letter-spacing: 0rpx;
	text-align: center;
	text-decoration-line: underline;
}

.text-fifth {
	position: absolute;
	width: 120rpx;
	height: 150rpx;
	left: 0;
	right: 0;
	top: 60rpx;
	bottom: 418rpx;
	margin: 0 auto;
	color: rgb(255, 255, 255);
	font-family: "Microsoft YaHei";
	font-size: 50rpx;
	font-weight: 400;
	line-height: 80rpx;
	letter-spacing: 0rpx;
	text-align: center;
}

.text-sixth {
	position: absolute;
	width: 100rpx;
	height: 17rpx;
	margin: 0 auto;
	top: 710rpx;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 179rpx 7rpx 180rpx;
	z-index: 9997;

	color: rgb(15, 15, 15);
	font-family: "Microsoft YaHei";
	font-size: 17rpx;
	font-weight: 400;
	line-height: 17rpx;
	letter-spacing: 0;
	text-align: left;
}

.slide-top {
	-webkit-animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
	animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
}

.slide-top1 {
	-webkit-animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
	animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
}

.scale-in-center {
	animation: scale-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-1050px);
		transform: translateY(-1050px);
	}
}

@-webkit-keyframes slide-top1 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-1050px);
		transform: translateY(-1050px);
	}
}

@keyframes ripple1 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.4);
		opacity: 0;

	}
}

@keyframes ripple2 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.5);
		opacity: 0;

	}
}

@keyframes ripple3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.6);
		opacity: 0;

	}
}

@keyframes slide-top {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-1050px);
		transform: translateY(-1050px);
	}
}

@keyframes slide-top1 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	100% {
		-webkit-transform: translateY(-1050px);
		transform: translateY(-1050px);
	}
}

@keyframes scale-in-center {
	0% {
		transform: scale(0);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}
</style>
  